<template>
  <div class="grayHairOrder">
    <!--    导航开始-->
    <commonHeader
      :title="title"
      @goBack="goBack()">
    </commonHeader>
    <!--    下拉刷新-->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!--    内容-->
      <div class="content">
        <!--      tab切换-->
        <div class="tabs flex-space-between">
          <div class="tab" v-for="(item,index) in tabsList" :key="index" @click="changeTab(index)">
            <div class="tabItmes" :class="{'tabActivity':tabIndex==index}">
              {{item}}
            </div>
          </div>
        </div>
        <!--      列表内容-->
        <div class="commonLists">
          <van-list
            v-if="orderList&&orderList.length*1>0"
            v-model="loading"
            :finished="finished"
            :offset="20"
            :immediate-check="false"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <list :list="orderList" @cancelOrder="cancelOrder"></list>
          </van-list>
          <div v-else class="nodata flex-space-center">
            暂无数据！
          </div>
        </div>
      </div>
    </van-pull-refresh>

  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader";
  import list from "./components/list";
  import {GETORDERLIST,CANCELORDER} from '../../apis/mine';
  export default {
    name:"grayHairOrder",
    components:{
      commonHeader,
      list
    },
    data() {
      return {
        title: "银发订单",
        tabsList:['全部','待付款','已付款'],//tab列表
        tabIndex:0,//tab下标
        orderList:[1,2,3],//订单列表
        // 上拉加载下拉刷新配置
        loading: false,//
        finished: false,//上拉加载完毕
        refreshing: false,
        page:1,//分页页数
        pageSize:10,//每页数据
      }
    },
    mounted() {
      // 上垃加载下拉刷新初始化
      this.loadingInit();
      // 获取订单列表
      this.getOrderList()
    },
    methods:{
      // 返回
      goBack(){
        this.$router.back()
      },
      // 切换tab
      changeTab(index){
        this.tabIndex = index;
        this.loadingInit();//上垃加载下拉刷新初始化
        this.getOrderList();//获取订单列表
      },
      // 上垃加载下拉刷新初始化
      loadingInit(){
        this.$loading()
        this.orderList = [];
        this.loading = false;
        this.finished = false;//上拉加载完毕
        this.refreshing = false;
        this.page = 1;//分页页数
        this.pageSize = 10;//每页数据
      },
      // -------------------------接口开始------------------------
      // 订单列表
      getOrderList(){
        let getOrderList = GETORDERLIST
        // 参数
        let type = ['all','wait','success']
        let params = {
          page:this.page,//分页页数
          limit:this.pageSize,//每页条数
          type:type[this.tabIndex],//订单状态
        }
        getOrderList(params).then(res=>{
          if(res.data.code*1===200){
            // 下拉刷新
            if (this.refreshing) {
              this.orderList = [];
              this.refreshing = false;
            }
            this.loading = false;
            const orderList = res.data.data.data;//每日挖矿列表
            if(orderList == null || orderList.length*1 === 0){
              this.finished = true
              return
            }
            if(orderList.length*1 < this.pageSize){
              this.finished = true
            }
            if(this.page*1 == 1){
              this.orderList = orderList
            }else{
              this.orderList = this.orderList.concat(orderList)
            }
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // 上拉加载
      onLoad() {
        this.page++;
        this.getOrderList();

      },
      // 下拉刷新
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.page=1;
        this.getOrderList();
      },
      // 取消订单
      cancelOrder(item){
        let cancelOrder = CANCELORDER
        // 参数
        let params = {
          order_sn:item.order_sn,//订单号
        }

        cancelOrder(params).then(res=>{
          if(res.data.code*1===200){
            this.loadingInit();//上垃加载下拉刷新初始化
            this.getOrderList();//获取订单列表
          } else {
            this.$toast(res.data.message);
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      // ------------------------接口结束-------------------
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .grayHairOrder{
    width:100%;
    padding-top: 1.38rem;
    box-sizing: border-box;
    .content{
      /*tab*/
      .tabs{
        width:100%;
        padding:0.3rem 1rem;
        box-sizing: border-box;
        .tab{
          display: flex;
          flex-direction: column;
          justify-content: center;
          img{
            width:auto;
            height: 0.56rem;
            margin-bottom: 0.1rem;
          }
          .tabItmes{
            font-size:@fontSize32;
            font-weight: @fontWeight500;
            font-family:@fontFamily400;
            color:@whiteColor;
          }
          .tabActivity{
            font-size:@fontSize32;
            font-weight: @fontWeight500;
            font-family:@fontFamily400;
            color:#FEA300;
          }
        }
      }
      .commonLists{
        width: 100%;
        padding:0 0.3rem;
        box-sizing: border-box;
        .nodata{
          width:100%;
          height:3rem;
          color:#ffffff;
        }
      }
    }

  }
</style>
